<template>
<div>
  <el-input
      style="width:50%;margin-bottom: 10px"
      placeholder="请根据范围(KM)输入搜索内容"
      v-model="pagination.queryString"
      @change="search"
      clearable>
  </el-input>
  <el-button @click="StationList()" class="dalfBut">查询</el-button>
  <!-- 数据单向绑定  :data表格数据 -->
  <el-table :data="dataList" border>
    <!-- prop属性  与此处数据的属性一致 -->
    <el-table-column prop="id"   label="仓库记录" width="100" ></el-table-column>
    <el-table-column prop="stationName"   label="仓库名" width="100" ></el-table-column>
    <el-table-column prop="area"   label="地区" width="100" ></el-table-column>
    <el-table-column prop="capacity"   label="库房数量" width="100" ></el-table-column>
    <el-table-column prop="type"   label="仓库类型" width="100" ></el-table-column>
    <el-table-column prop="distance"   label="距离(KM)" width="100" ></el-table-column>
<!--    <el-table-column label="操作" width="200">
      <template slot-scope="scope">
        <el-button type="primary" size="small"    circle @click="handle(scope.row)" ></el-button>
      </template>
    </el-table-column>-->
  </el-table>
</div>
</template>

<script>
export default {
  name: "MyStationView",
  data() {
    return {
      pagination: {       //分页相关模型数据
        currentPage: 1, //当前页码
        pageSize: 4,    //每页显示的记录数
        total: 100,        //总记录数
        queryString: 0//查询条件
      },
      dataList: [],
      formData:{},
      dialogFormVisibleEdit: false,

    }
  },
  created() {
    this.StationList()
  },
  mounted() {
    this.position()
  },
  methods:{
    //获取用户位置
    position() {
      const _this = this;
      let aMapScript = document.createElement('script')
      aMapScript.setAttribute('src', 'https://webapi.amap.com/maps?v=1.4.15&key=ce49a4f8ed20d5ea9b21516aaddbf456&plugin=AMap.CitySearch')
      document.head.appendChild(aMapScript)
      return aMapScript.onload = function() {
        AMap.plugin('AMap.Geolocation', function () {
          var geolocation = new AMap.Geolocation({
            // 是否使用高精度定位，默认：true
            enableHighAccuracy: true,
            // 设置定位超时时间，默认：无穷大
            timeout: 10000,
            // 定位按钮的停靠位置的偏移量，默认：Pixel(10, 20)
            buttonOffset: new AMap.Pixel(10, 20),
            //  定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
            zoomToAccuracy: true,
            //  定位按钮的排放位置,  RB表示右下
            buttonPosition: 'RB'
          })

          geolocation.getCurrentPosition()
          AMap.event.addListener(geolocation, 'complete', onComplete)
          AMap.event.addListener(geolocation, 'error', onError)

          function onComplete(data) {
            // data是具体的定位信息
            console.log(data)
            /*Q:31.487846408421  31.48793276197545
            R:120.37141981336902  120.37108887646482
            lat:31.487846
            lng:120.37142*/
            const plat=data.position.Q
            const plng=data.position.R
            console.log(plng)
            console.log(plat)
            //console.log('成功')
            //重置用户的经纬度
            _this.$store.commit("REMOVE_WAY")
            _this.$store.commit("SET_LONGITUDE",plng)
            _this.$store.commit("SET_LATITUDE",plat)
          }

          function onError(data) {
            console.log(data)
            // 定位出错
            console.log('失败')
          }

        })
      }
    },
    //若没有传递当前页码 ， 默认展示第一页
    StationList(page = 1) {
      this.pagination.currentPage = page
      const  longitude=this.$store.getters.getPlng
      const latitude=this.$store.getters.getPLat
      const  key=this.$store.getters.getUser.name
      let param= {
        currentPage: this.pagination.currentPage,
        pageSize: this.pagination.pageSize,
        queryString: this.pagination.queryString,
        longitude,
        latitude,
        key
      }
      console.log(key)
      axios.get('http://localhost:8099/user/station', {params: param})
          .then(response => {  //response.data.data 等价于 Map 有PageInfo&query
            console.log(response)
            this.pagination.total = response.data.total
            this.dataList = response.data.records
          })
          .catch(error => {
            console.log(error)
          })
    },
    search(){
      this.position()
    },
    resetForm(){
      this.formData={}
    }
    ,
    handleCreate(){
      this.resetForm()
      this.dialogFormVisible=true
    },

    handleUpdate(row){
      axios.get(`http://localhost:8099/station/${row.id}`).then(response=> {
        if (response.data.code==200){
          this.dialogFormVisibleEdit=true
          this.formData=response.data.data
        }else {
          this.$message.error(response.data.code)
        }
      })
    },
    //编辑完成
    handleEdit(){
      //校验表单
      this.$refs["dataEditForm"].validate((valid)=>{
        if (valid){
          this.dialogFormVisibleEdit=false
          axios.post('http://localhost:8099/station/update',this.formData).then(response=>{
            if (response.data.code==200){
              this.$message.success(response.data.message)
            }else {
              this.$message.error(response.data.code)
            }
          })
        }else {
          this.$message.error('表单校验失败')
          return false
        }
      })
      location.reload()
    },
  }
}
</script>

<style scoped>

</style>